<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1_固定定位广告条</title>
    <style>
        .top {
            height: 120px;
            background-color: #5aa4ae;
            font-size: 30px;
            color: #fff;
            text-align: center;
            position: fixed;
            top: 0;
            width: 100vw;/* 宽度为视口宽度（viewport width）的100% */
        }
        .left,.right {
            width: 60px;
            height: 200px;
            text-align: center;
            position: fixed;
            top: 300px;
        }
        .left {
            background-color: #fff799;
            left: 20px;
        }
        .right {
            background-color: #f35336;
            right: 20px;
        }
        .main {
            margin-top: 130px;
        }
    </style>
</head>
<body>
    <div class="top">我是顶部广告条</div>
    <div class="left">左侧广告条</div>
    <div class="right">右侧广告条</div>
    <div class="main">
        我是内容
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, aliquid commodi distinctio doloremque
            facilis ipsam iure neque nobis optio praesentium quod quos voluptas! Beatae delectus illo ipsa, modi nemo
            recusandae?
        </div>
        <div>Ab adipisci asperiores at, cumque dolor et ex excepturi fugiat, fugit id ipsam ipsum iusto laboriosam
            laborum natus omnis perspiciatis quaerat qui quibusdam quisquam quos rem repellendus sequi, tempora veniam.
        </div>
        <div>Animi asperiores facilis ipsam laboriosam provident repellendus saepe sed velit! Alias aliquid delectus eos
            facilis ipsam ipsum nulla repudiandae! Dolorem ratione reiciendis sit? Aperiam, laboriosam, voluptas. Fugiat
            maiores ratione voluptatibus!
        </div>
        <div>Accusantium atque beatae distinctio illum, natus nobis odio porro quia sunt totam? Facere nobis veniam
            vitae. A alias consectetur corporis dolores eos, ipsum laudantium libero minima nostrum sunt, ullam
            voluptatem!
        </div>
        <div>Aspernatur deserunt in incidunt ipsum molestias natus nemo nesciunt nisi pariatur possimus praesentium
            quaerat sit unde, voluptate voluptatem? A cum esse fuga ipsam iure odit quia, temporibus veniam vitae!
            Culpa.
        </div>
        <div>Aliquam aliquid, culpa distinctio fuga minus molestiae mollitia nisi, obcaecati pariatur quaerat, quas
            quidem temporibus veritatis. Illum quos, voluptatum. Ab architecto, dicta eos est itaque molestias mollitia
            totam voluptatibus voluptatum?
        </div>
        <div>Atque eum iure perspiciatis quam ratione? Commodi dolorum eos esse est fugiat laborum laudantium libero
            nobis nostrum obcaecati odit omnis porro praesentium provident repellat sequi tempore temporibus vitae,
            voluptas voluptatibus.
        </div>
        <div>Accusantium aliquam cupiditate neque officia provident quas, quos sint ullam ut voluptatibus. Atque
            blanditiis ea eaque eveniet expedita hic illum laborum neque nesciunt officia, officiis quidem, repellat sit
            vel veritatis.
        </div>
        <div>Alias assumenda culpa debitis dicta dolore doloremque doloribus, error esse excepturi explicabo facere fuga
            fugiat fugit magnam neque nesciunt quaerat quam quas quibusdam soluta temporibus ullam ut veniam,
            voluptatibus voluptatum.
        </div>
        <div>Corporis, doloremque eius ex minus omnis pariatur placeat qui repellat! Commodi inventore nostrum quam
            repudiandae unde? Eaque error magni minima, neque numquam officia praesentium quam quidem quos soluta
            tempora ullam.
        </div>
        <div>Amet animi, asperiores consequatur consequuntur cumque ducimus ex maxime minima molestiae natus nostrum
            pariatur, quasi quia quidem reprehenderit velit vero voluptas! Asperiores autem dolore doloremque, illo
            perferendis porro quas recusandae.
        </div>
        <div>Alias architecto aspernatur consequatur corporis culpa dolore esse eveniet impedit iure libero mollitia
            necessitatibus nemo nihil non odit optio placeat provident repellat repudiandae, sequi tempore vel
            veritatis? Aspernatur, explicabo hic.
        </div>
        <div>Consectetur culpa delectus facilis ipsam itaque laudantium nihil nobis, non officia pariatur, placeat
            possimus praesentium rem tempore tenetur? Accusantium alias aliquid architecto commodi culpa cum doloribus
            enim esse quae sit!
        </div>
        <div>A accusantium animi aperiam assumenda aut, consectetur corporis culpa dicta dolorem enim expedita ipsa
            minima molestiae nihil optio perspiciatis provident quae qui quia quidem sed similique tempore veniam
            voluptas voluptatem.
        </div>
        <div>Ab aperiam architecto asperiores autem consectetur delectus dicta ducimus enim et fuga illo impedit minima
            mollitia obcaecati odio qui sed similique sint sit tempora temporibus tenetur, vero vitae voluptates
            voluptatum.
        </div>
        <div>Ab accusamus aspernatur culpa cum cupiditate earum, error illo ipsam maxime nam nesciunt non quia veniam?
            Doloribus in nihil reiciendis repellat? Accusamus est illum in nihil nulla saepe sapiente tempore.
        </div>
        <div>Amet blanditiis facere impedit magnam natus nostrum quasi soluta tempore, totam? Accusamus corporis facilis
            fuga hic id incidunt modi omnis quod totam voluptates. Aliquam consequuntur doloremque, esse exercitationem
            odit soluta.
        </div>
        <div>Accusamus architecto assumenda, aut culpa distinctio earum et fugiat id libero maxime nemo, numquam quis
            rerum sint totam? Consectetur ipsam maxime neque provident quam, recusandae reiciendis repellendus rerum
            tenetur veniam.
        </div>
        <div>Ab adipisci aperiam, aut commodi cum cumque dolores, est excepturi facere fugiat id incidunt inventore
            labore modi necessitatibus neque nesciunt nihil officiis perferendis quibusdam quisquam sapiente sunt ut vel
            velit?
        </div>
        <div>Aliquid, cumque vero. At cumque doloremque doloribus natus obcaecati repellat unde. Ad eius est excepturi
            ipsum, iste molestiae nulla quos repudiandae! Accusantium aliquid consequatur dicta inventore quo saepe.
            Nobis, tenetur.
        </div>
        <div>Aperiam aut dolorem nisi possimus vitae. Alias amet expedita, fuga maxime molestias non, nostrum odio
            possimus quam qui recusandae, repudiandae sit suscipit tempore ut? Aperiam beatae consequatur nisi
            praesentium soluta!
        </div>
        <div>Amet animi beatae debitis dicta, distinctio dolorem enim eos est ex excepturi impedit ipsam ipsum iste
            itaque labore, magnam minus nemo quae quam quod reiciendis rem veniam veritatis vitae voluptatibus.
        </div>
        <div>Ab, adipisci deleniti facilis magnam odio perferendis voluptatem. Animi, dolorem doloremque ducimus ea
            eligendi et fugit incidunt itaque laborum molestiae nesciunt officiis perferendis possimus qui repellat
            similique totam ut! Itaque.
        </div>
        <div>Accusamus aliquid, autem deleniti dolorum enim eum ex fugit ipsa, nemo non nostrum pariatur perferendis quo
            sit unde? Aspernatur consequatur corporis dolore doloremque dolorum illo incidunt labore maiores obcaecati
            vero.
        </div>
        <div>Assumenda delectus et explicabo iusto labore magni, modi mollitia nam optio quidem quo ratione recusandae
            reprehenderit rerum sapiente suscipit voluptate! Doloribus, earum, soluta. Consequatur facilis incidunt
            molestiae neque quidem ratione!
        </div>
        <div>Aliquam cupiditate dolorem doloremque dolores enim ex, excepturi fugiat id iste iure magni maxime nam
            nesciunt numquam odio optio porro possimus provident quasi, quia reprehenderit temporibus tenetur vero?
            Dolore, obcaecati.
        </div>
        <div>Ab aperiam asperiores autem commodi delectus dolorum eius enim et expedita hic in minima placeat quam quo
            reprehenderit sit tempora, ut voluptas voluptates voluptatum! A accusantium numquam officia. Adipisci,
            ducimus?
        </div>
        <div>Distinctio fugit iure maxime nobis perferendis rerum voluptatibus? A adipisci aliquam aperiam at aut cum
            earum expedita, impedit in laborum, non nulla quia quisquam ratione sequi, temporibus ut. Aspernatur,
            ratione.
        </div>
        <div>Accusantium blanditiis eaque eius expedita explicabo facilis impedit ipsum laborum laudantium neque,
            obcaecati omnis praesentium quod quos reprehenderit tempora temporibus vel voluptatibus. Ab aut blanditiis
            iste numquam quis quod repudiandae.
        </div>
        <div>Amet aspernatur at dolore esse ex explicabo facere fugiat impedit nesciunt nihil pariatur quae quaerat quas
            quos reiciendis rerum sapiente sed similique, tempore totam vel veritatis voluptas voluptate voluptatem
            voluptatum.
        </div>
        <div>Cum dolores fugiat incidunt libero nam numquam quas quidem ut. Accusamus, asperiores eos error et
            excepturi, facere maiores nihil nulla numquam officia porro quibusdam quis quo, repellat rerum sapiente
            vitae.
        </div>
        <div>Adipisci aperiam asperiores culpa distinctio earum explicabo facere id illum, ipsa laboriosam maiores
            molestiae nam obcaecati placeat praesentium quis quo reiciendis rerum temporibus vel. Esse officia quae
            repudiandae voluptate voluptates.
        </div>
        <div>A aliquam aut cupiditate dignissimos distinctio doloribus enim esse expedita fuga inventore laudantium
            maxime minima, molestias natus neque nihil, obcaecati odit provident rem rerum soluta tenetur unde veniam
            vitae voluptatibus?
        </div>
        <div>Aperiam dolor magnam numquam optio ratione? Ab aliquid aperiam atque consequatur cupiditate dignissimos
            doloremque in ipsam ipsum magni molestias neque nulla officia omnis optio, placeat rerum voluptates! Fugit,
            nihil nulla.
        </div>
        <div>Aliquam assumenda blanditiis commodi, consectetur culpa ea eligendi enim eos fuga illum natus
            necessitatibus neque nisi nobis odit possimus quae quia quidem sapiente sequi sit, sunt tenetur unde veniam
            vero.
        </div>
        <div>Accusantium amet animi, at ducimus eum natus perferendis qui quis rem totam. Ad amet aspernatur culpa
            eligendi eos error id nam nisi nostrum officia quae quos repellat repudiandae unde, voluptates.
        </div>
        <div>Accusamus ad aliquam consequatur dignissimos esse eveniet, ex exercitationem fuga impedit in iste nam nulla
            odit provident quibusdam, quod quos ratione recusandae repellendus soluta veniam vero voluptas voluptatibus.
            Consequatur, dolor?
        </div>
        <div>Ad asperiores aspernatur assumenda aut commodi consequatur consequuntur cum, deleniti dolorem doloremque
            ducimus et excepturi explicabo illo impedit itaque molestias natus nihil non odit pariatur perferendis quasi
            tempore ullam veniam.
        </div>
        <div>Aperiam assumenda atque commodi dolor ex fuga hic incidunt iusto molestias nisi nulla qui quis reiciendis,
            similique tenetur. Eaque eos et exercitationem explicabo nihil nostrum, quasi sint sit vitae voluptates?
        </div>
        <div>A accusantium at commodi consequatur dignissimos eius esse eum facere fugiat incidunt ipsam iste laborum
            libero nam nobis non nostrum pariatur quam quas, quasi rem rerum sit tempore ullam vero.
        </div>
        <div>Esse ex illo incidunt minima quidem sequi suscipit. Accusamus ad adipisci aspernatur consectetur doloremque
            eaque eligendi exercitationem laboriosam nemo neque, nesciunt nisi omnis optio possimus repellendus sed
            sequi similique tempore.
        </div>
        <div>Accusantium amet animi asperiores commodi consectetur corporis culpa deleniti dignissimos esse est et eum,
            facere fugit iusto laborum magni mollitia necessitatibus obcaecati officiis porro quam quibusdam repellendus
            reprehenderit temporibus tenetur!
        </div>
        <div>Dignissimos est iste libero mollitia natus nemo, quam quasi. Ab cumque delectus, dicta, doloremque eveniet
            ipsam mollitia obcaecati quam quas quo recusandae saepe sapiente temporibus, velit voluptatum! Dolorum,
            ipsam, unde?
        </div>
        <div>Ab accusantium asperiores atque beatae corporis dicta esse excepturi exercitationem hic illum impedit iste
            magni minus nihil nobis omnis perspiciatis placeat, possimus quam quod reiciendis repudiandae tempora vel,
            voluptas voluptates.
        </div>
        <div>Cupiditate ducimus eum libero magni nostrum saepe similique soluta. Amet at beatae consequuntur delectus
            eum, eveniet natus, placeat porro praesentium quaerat recusandae sunt, veritatis. Dicta est ipsam quas
            quibusdam tempora!
        </div>
        <div>Alias consequuntur dicta in incidunt ipsam labore molestiae numquam quis repellat voluptas. Amet at nam
            nisi nulla, praesentium quod repellat sunt voluptatum. Ab consequuntur dolores eius enim, harum illo omnis.
        </div>
        <div>Ad, adipisci aliquid assumenda atque debitis deleniti error libero molestiae nisi obcaecati quam quod, rem.
            Aperiam cum cumque doloribus, esse exercitationem expedita facilis necessitatibus nobis obcaecati
            perferendis, qui reprehenderit sequi.
        </div>
        <div>Corporis expedita ipsa odio placeat quas quasi reiciendis temporibus? Adipisci asperiores, assumenda dicta
            dignissimos earum, error molestias nam numquam odio praesentium quaerat quis ratione rerum sapiente tempora
            tenetur unde, voluptate?
        </div>
        <div>Animi, ea, error. Enim numquam, velit. Assumenda at aut consequuntur delectus dicta dolorem doloribus ea
            eligendi eum fugiat fugit, libero molestiae nesciunt omnis porro praesentium qui, quis rem veniam
            voluptatum!
        </div>
        <div>Ab aut delectus deleniti facilis, fugiat iusto laudantium libero maiores maxime minus molestiae optio quae
            quia quis quod repellendus sapiente temporibus voluptate. Adipisci facere, facilis ipsam possimus quo
            suscipit vel.
        </div>
        <div>Atque beatae culpa doloribus enim, explicabo, illum in incidunt iste iure, laboriosam nam nemo nobis non
            repellendus saepe sed similique velit. Cupiditate dicta dignissimos eligendi enim iure molestias, quos
            sequi!
        </div>
        <div>Adipisci, aliquid eligendi minima quam repellendus ullam unde voluptate voluptates. Autem dignissimos
            quibusdam totam unde? Accusantium aperiam asperiores at deserunt fugit ipsum, labore magni omnis porro qui
            sequi temporibus voluptates!
        </div>
        <div>A animi asperiores atque autem culpa delectus deleniti deserunt esse id illo labore, nam nobis nostrum
            omnis perferendis porro quis quos reiciendis repellat repellendus? Alias eum rem repellat sunt voluptas.
        </div>
        <div>Architecto asperiores atque dolore ea expedita fugiat fugit ipsa laboriosam libero, magnam molestiae
            nesciunt nisi nobis non quaerat quis sapiente vitae voluptatem! Aperiam consequatur eaque est quasi quo
            repudiandae vitae!
        </div>
        <div>Aliquid delectus deleniti, dignissimos dolores illum in ipsam nemo officiis omnis tenetur. Aliquam, atque
            consectetur dolorem error magnam minima numquam officiis perferendis quasi repellat sit soluta sunt vel
            vitae voluptatum?
        </div>
        <div>Accusantium beatae corporis doloribus ea fugit libero maxime necessitatibus recusandae similique tempore!
            Aliquid aperiam delectus dolorem facilis, hic, impedit itaque labore non odio provident quam quibusdam
            reiciendis sed sequi, soluta.
        </div>
        <div>Ab accusantium aliquam aperiam dicta dolorem eligendi error fugit iusto quidem, rem repellat rerum sequi
            similique. Adipisci eveniet illum nihil saepe temporibus. Cumque ipsum modi nulla quos voluptas? Autem, cum.
        </div>
        <div>Adipisci atque consectetur fuga magni nihil quaerat quam qui! Aliquid corporis eaque tempore. Amet,
            aspernatur beatae deleniti eaque et exercitationem in laboriosam minima neque officia sapiente tempora ut
            voluptates voluptatibus.
        </div>
        <div>Ad atque commodi, deleniti dignissimos eaque eligendi eos fugit ipsa ipsum nisi, officia quae quam quas
            velit, veritatis? Ad architecto assumenda deleniti expedita fuga magnam officiis quasi quis, quo
            reprehenderit?
        </div>
        <div>Asperiores aspernatur, doloribus impedit modi repudiandae sit totam? Incidunt ipsum quo vitae. Blanditiis
            consequuntur eveniet explicabo, ipsam natus nihil officiis placeat, porro provident quae quos repellendus
            reprehenderit sapiente sed vitae!
        </div>
    </div>
</body>
</html>